<template>
	<view style="padding-bottom: 50px;" v-if="cart.length != 0 && JSON.stringify(user) !== '{}'">
		
		<view style="display: flex; align-items: center; border-bottom: 1px solid #efefef; flex-direction: row;">
			<uni-icons type="shop" size="20"></uni-icons>
			<text style="margin-left: 5px; font-size: 12px; font-weight: bold;">购物车</text>
		</view>
		
		<uni-swipe-action>
			<view v-for="(item, i) in cart" :key="i" style="display: flex; height: 90px; border-bottom: 1px solid #efefef;">
				<uni-swipe-action-item :right-options="options" @click="delete_goods(item)">
					<view style="display: flex; align-items: center; width: 120px;">
						<radio :checked='item.goods_state' color="#84AF9B" @click="radio_change" :data-goods_id="item.goods_id" :data-goods_state="item.goods_state"></radio>
						<image :src="item.goods_img" style="height: 80px; width: 110px;" @click="gotodetail(item)"></image>
					</view>
					
					<view style="display: flex; flex-direction: column; justify-content: space-between; margin: 10px;">
						<text style="font-size: 18px;" @click="gotodetail(item)">{{item.goods_name}}</text>
						<view style="margin-top: 15px; display: flex; align-items: center; justify-content: space-between; margin-right: 5px;">
							<text style="font-size: 16px; color: red; font-weight: bold; margin-right: 70px; " @click="gotodetail(item)">￥{{item.goods_price | tofixed}}</text>
							<uni-number-box :min="1" :value="item.goods_count" @change="num_change($event, item)"></uni-number-box>
						</view>
					</view>
				</uni-swipe-action-item>
			</view>
		</uni-swipe-action>
		
		
		<view style="position: fixed; background-color: white; bottom: 0; height: 50px; width: 100%; display: flex; align-items: center; border-top: 1px solid #efefef; justify-content: space-between;">
			<view @click="all_choose()">
				<radio color="#84AF9B" :checked="isfull"></radio>
				<text>全选</text>
			</view>
			
			<view>
				<text>合计: </text>
				<text style="color: #C00000; margin-right: 10px;"> ￥{{price | tofixed}}</text>
			</view>
			
			
		</view>
	</view>
	
	<view v-else style="display: flex; align-items: center; flex-direction: column; margin-top: 190px;">
		<image src="/static/cart_empty@2x.png" style="height: 130px; margin-bottom: 15px;" mode="heightFix"></image>
		
		<text style="font-size: 14px;" v-if="JSON.stringify(user) == '{}'">您还未登录！</text>
		<text style="font-size: 14px;" v-else-if="cart.length == 0">购物车空空如也~</text>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex'
	
	export default {
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#84AF9B'
					}
				}],
				all_type: true,
				seconds: 3
			};
		},
		computed: {
			...mapState('m_cart', ['cart']),
			...mapState('m_my', ['user']),
			...mapGetters('m_cart', ['total']),
			...mapGetters('m_cart', ['pay_total']),
			...mapGetters('m_cart', ['price']),
			
			
			isfull() {
				if(this.total == this.pay_total){
					this.all_type = true
					return true
				}else{
					this.all_type = false
					return false
				}
			}
		},
		onShow() {
			this.setCartNum()
			console.log(this.cart.length)
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapMutations('m_cart', ['updateRadio']),
			...mapMutations('m_cart', ['updateNum']),
			...mapMutations('m_cart', ['deleteNum']),
			...mapMutations('m_cart', ['cart_all_choose']),
			...mapMutations('m_my', ['updateReaddress']),
			
			setCartNum() {
				if(this.pay_total == 0){
					uni.hideTabBarRedDot({
						index: 3,
					})
				}else{
					uni.setTabBarBadge({
						index: 3,
						text: this.pay_total + ''
					})
				}		
			},
			radio_change(e) {
				this.updateRadio(e.target.dataset)
				this.setCartNum()
			},
			num_change(val, item) {
				var goods = {
					goods_id: item.goods_id,
					goods_count: val
				}
				this.updateNum(goods)
				this.setCartNum()
			},
			delete_goods(e) {
				this.deleteNum(e.goods_id)
				this.setCartNum()
			},
			
			
			all_choose() {
				this.cart_all_choose(!this.all_type)
				this.all_type = !this.all_type
				this.setCartNum()
			},
			
			show_tips(n) {
				uni.showToast({
					title: '请先登录!\n' + n + '秒后自动进入登录界面',
					duration: 1500,
					icon:'none'
				})
			},
			delay_message() {
				this.show_tips(this.seconds)
				this.timer = setInterval(() => {
					this.seconds -- 
					if(this.seconds <= 0) {
						clearInterval(this.timer)
						uni.switchTab({
							url: '/pages/my/my',
							success: () => {
								this.updateReaddress({
									openType: 'switchTab',
									from: '/pages/cart/cart'
								})
							}
						})
						return this.seconds = 3
					}			
					this.show_tips(this.seconds)
				}, 750)
			},
			gotodetail(item) {
				uni.navigateTo({
					url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
				})
			}
		},
		filters: {
			tofixed(num) {
				return Number(num).toFixed(2)
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}
	
	.uni-swipe_text--center {
		display: flex;
	}
	
	.uni-swipe {
		width: 375px;
	}


</style>
